<template>
  <div class="table-box w-1/1 h-1/1 bg-[#fff]">
    <ProTable :columns="columns" :request-api="list" ref="proRef">
      <template #tableHeader="scope">
        <el-button v-auth="'添加'" type="primary" @click="opera(undefined)">添加</el-button>
        <el-button v-auth="'删除'" type="danger" @click="deleteApi(scope.selectedListIds)">批量删除</el-button>
      </template>
      <template #opera="{ row }">
        <el-button link type="primary" v-auth="'编辑'" @click="opera(row)">编辑</el-button>
        <el-button link type="primary" v-auth="'删除'" @click="deleteApi([row.id])">删除</el-button>
      </template>
    </ProTable>
    <EmojiDrawer ref="emojiRef"></EmojiDrawer>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { list, add, edit, deleteItem } from "@/api/modules/emoji";
import EmojiDrawer from "./components/emojiDrawer.vue";
import { ref } from "vue";
import { useHandleData } from "@/hooks/useHandleData";

const columns: ColumnProps[] = [
  { type: "selection", width: 60 },
  { label: "排序", prop: "sort", width: 80 },
  { label: "表情", prop: "emoji", width: 80 },
  { label: "文字显示", prop: "text_show", width: 120 },
  // { label: "unicode编码", prop: "unicode" },
  { prop: "opera", label: "操作" }
];

const emojiRef = ref<InstanceType<typeof EmojiDrawer> | null>();
const proRef = ref<InstanceType<typeof ProTable> | null>();
const opera = (row: any) => {
  const params: any = {
    row: row ? row : { emoji: "", text_show: "", sort: 100 },
    api: row ? edit : add,
    getTable: proRef.value?.getTableList
  };
  emojiRef.value?.open(params);
};

const deleteApi = async (ids: any) => {
  try {
    await useHandleData(deleteItem, { ids }, "删除所选内容");
    proRef.value?.getTableList();
  } catch (error) {}
};
</script>

<style></style>
